<template>
  <a-menu
      mode="horizontal"
      :selectable=false
      @click="handleClick"
      style="background-color: rgba(255,255,255,0.1)"
  >
    <a-menu-item key="/visitor" >
      <template #icon>
        <home-outlined />
      </template>
      首页
    </a-menu-item>

    <a-menu-item key="/visitor/timeline" >
      <template #icon>
        <calendar-outlined />
      </template>
      时间轴
    </a-menu-item>

    <a-menu-item key="/visitor/tags">
      <template #icon>
        <tags-outlined />
      </template>
      标签
    </a-menu-item>

    <a-menu-item key="/visitor/category">
      <template #icon>
        <folder-open-outlined />
      </template>
      分类
    </a-menu-item>
  </a-menu>
</template>

<script setup>
import {
  FolderOpenOutlined,
  HomeOutlined,
  TagsOutlined,
  CalendarOutlined
}from '@ant-design/icons-vue';
import {useRouter} from "vue-router";

const router=useRouter()
const handleClick=(item)=>{
  console.log(item.key)
  const timer = setInterval(function () {
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-osTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    this.isTop = true;
    if (osTop === 0) {
      clearInterval(timer);
    }
  }, 10);
  router.push(item.key)
}

</script>

<style scoped>

</style>